class BiaoQianYe extends HTMLElement {
	lie = null // 标签列
	neiRongChaCao = null
	
	constructor() {
		super()
		
		let shadow = this.attachShadow({ mode: 'open', slotAssignment: 'manual' })
		
		let style = document.createElement('style')
		style.textContent = `
			::-webkit-scrollbar {
				width: 5px;
				height: 5px;
			}
			::-webkit-scrollbar-track {
				background-color: rgba(63, 127, 255, .2);
			}
			::-webkit-scrollbar-thumb {
				border-radius: 2px;
				background-color: rgba(63, 127, 255, 1);
			}
			::-webkit-scrollbar-button, ::-webkit-scrollbar-corner {
				display: none;
			}
			.lie {
				color: #def;
				text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
				background: linear-gradient(90deg, rgba(0, 150, 200, 0) 0%, rgba(0, 150, 200, 0.2) 100%);
				flex: 0 0 var(--lie-kuan);
				height: 100%;
				overflow: auto;
			}
			.biao-qian-xiang {
				cursor: pointer;
				width: 100%;
				height: 2rem;
				line-height: 2rem;
				text-align: center;
			}
			.biao-qian-xiang:hover, .xuan-zhong {
				color: #fff;
				background: linear-gradient(90deg, rgba(0, 150, 200, 0) 0%, rgba(0, 150, 200, 1.0) 100%);
			}
			.nei-rong {
				box-sizing: border-box;
				width: calc(100% - var(--lie-kuan));
				height: 100%;
				padding: 1rem;
				overflow: auto;
			}
		`
		shadow.appendChild(style)
		// 标签列
		this.lie = document.createElement('div')
		this.lie.classList.add('lie')
		shadow.appendChild(this.lie)
		// 内容
		let neiRong = document.createElement('div')
		neiRong.classList.add('nei-rong')
		this.neiRongChaCao = document.createElement('slot')
		neiRong.appendChild(this.neiRongChaCao)
		shadow.appendChild(neiRong)
	}
	
	connectedCallback() {
		this.style = `
			display: flex;
			width: 100%;
			height: 100%;
			--lie-kuan: 5rem;
		`
	}
	// 更新标签列
	gengXinBiaoQian() {
		this.lie.innerHTML = ''
		
		this.querySelectorAll('biao-qian-xiang').forEach((bqx, i) => {
			let biaoTi = bqx.biaoTi?.[0]
			if (!biaoTi) {
				let biaoTiWenBen = bqx.getAttribute('biao-ti')
				biaoTi = document.createElement('div')
				biaoTi.innerText = biaoTiWenBen
			}
			biaoTi.classList.add('biao-qian-xiang')
			biaoTi.dataset.suoYin = i
			biaoTi.onpointerdown = () => {
				this.xuanZhong(bqx, i)
			}
			this.lie.appendChild(biaoTi)
		})
		
		if (this.childNodes.length > 0) this.xuanZhong(this.childNodes[0], 0)
	}
	
	xuanZhong(biaoQianXiang, suoYin) {
		this.lie.childNodes.forEach(a => a.classList.remove('xuan-zhong'))
		this.lie.childNodes[suoYin].classList.add('xuan-zhong')
		
		let neiRong = biaoQianXiang.neiRong
		if (neiRong) {
			this.append(...neiRong)
			this.neiRongChaCao.assign(...neiRong)
		}
	}
}
customElements.define('biao-qian-ye', BiaoQianYe)

class BiaoQianXiang extends HTMLElement {
	biaoTiChaCao = null
	neiRongChaCao = null
	biaoTi = null
	neiRong = null
	
	constructor() {
		super()
		
		let shadow = this.attachShadow({ mode: 'open' })
		
		this.biaoTiChaCao = document.createElement('slot')
		this.biaoTiChaCao.name = 'biao-ti'
		shadow.appendChild(this.biaoTiChaCao)
		this.neiRongChaCao = document.createElement('slot')
		this.neiRongChaCao.name = 'nei-rong'
		shadow.appendChild(this.neiRongChaCao)
	}
	
	connectedCallback() {
		this.gengXinNeiRong()
	}
	
	static get observedAttributes() {
		return ['biao-ti'];
	}
	
	attributeChangedCallback(name, oldValue, newValue) {
		if (name == 'biao-ti') this.parentElement?.gengXinBiaoQian?.()
	}
	// 更新内容
	gengXinNeiRong() {
		this.biaoTi = this.biaoTiChaCao.assignedNodes()
		this.neiRong = this.neiRongChaCao.assignedNodes()
		
		this.parentElement.gengXinBiaoQian?.()
	}
}
customElements.define('biao-qian-xiang', BiaoQianXiang)